<template>
  <div>
    <!-- <h2>添加好友</h2> -->
    <span class="kong"></span>
    <van-nav-bar title="添加好友" left-arrow @click-left="onClickLeft" fixed/>
    <van-search placeholder="请输入搜索关键词" v-model="value"/>
    <div>
      <van-row type="flex" justify="space-around">
        <van-col span="10">
          <div class="tongxin">
            <a href="javascript:;">
              <img src="../assets/shouji.jpg" alt>
            </a>
            <div class="tx">
              <p>连接通讯录</p>
              <p>发现通讯录好友</p>
            </div>
          </div>
          <span class="xian"></span>
        </van-col>

        <van-col span="10">
          <div class="weibo">
            <a href="javascript:;">
              <img src="../assets/weibo.jpg" alt>
            </a>
            <div class="tx">
              <p>连接微博</p>
              <p>发现微博好友</p>
            </div>
          </div>
          <span class="xian"></span>
        </van-col>
      </van-row>
      <van-row type="flex" justify="space-around">
        <van-col span="10">
          <div class="weixin">
            <a href="javascript:;">
              <img src="../assets/weixin.jpg" alt>
            </a>
            <p>微信邀请</p>
          </div>
        </van-col>
        <van-col span="10">
          <div class="qq">
            <a href="javascript:;">
              <img src="../assets/qq.jpg" alt>
            </a>
            <p>QQ邀请</p>
          </div>
        </van-col>
      </van-row>
    </div>

    <div>
      <van-panel title="你可能认识">
        <div v-for="item in list" :key="item.id">
          <div class="head">
            <div class="left">
              <span class="yuan">
                <img :src="item.head" alt>
              </span>
              <div class="yhm">
                <p>{{item.name}}</p>
                <p>附近用户</p>
              </div>
            </div>
            <button class="btn" @click="fd($event)" ref="btn">+关注</button>
          </div>
          <span class="ge"></span>
        </div>
      </van-panel>
    </div>
    <div>
      <van-panel title="FitTime推荐">
        <div class="yhm" v-for="item in list" :key="item.id">
          <div class="head">
            <div class="left">
              <span class="yuan">
                <img :src="item.head" alt>
              </span>
              <div class="yhm">
                <p>{{item.name}}</p>
                <p>长腿女神</p>
              </div>
            </div>
            <button class="btn" @click="fd($event)">+关注</button>
          </div>
          <span class="ge"></span>
          <div class="img">
            <img :src="item.img" alt>
          </div>
        </div>
      </van-panel>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Addfriend",
  data() {
    return {
      list: [],
      value: "",
      activeNames: ["1"],
      fs: true
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/frecommend");
    },
    fd(a) {
      if (this.fs) {
        a.target.innerHTML = "已关注";
        this.fs = false;
      } else {
        a.target.innerHTML = "+关注";
        this.fs = true;
      }
    }
  },
  mounted() {
    var _this = this;
    axios({
      url: "http://www.baiu.com/api"
    }).then(function(data) {
      //   console.log(data.data.list);
      _this.list = data.data.list;
    });
  }
};
</script>

<style scoped>
.ge {
  display: block;
  height: 10px;
  background: #fff;
}
.xian {
  display: block;
  height: 1px;
  background: #aaa;
  margin-top: 10px;
}
.van-col {
  margin-top: 20px;
  /* border-bottom: 1px solid #aaa; */
}
.van-row img {
  width: 40px;
  height: 40px;
  background-color: rgba(68, 68, 68, 1);
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
}
.tx {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.tx p:nth-of-type(1) {
  height: 10px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-family: Arial-bold;
  margin-left: 7px;
}
.tx p:nth-of-type(2) {
  /* height: 14px; */
  color: rgba(106, 106, 106, 1);
  font-size: 12px;
  font-family: Arial-regular;
  margin-left: 7px;
  margin-top: 9px;
}
.weixin p {
  /* height: 16px; */
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: Arial-bold;
  margin-left: 7px;
}
.qq p {
  /* height: 16px; */
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: Arial-bold;
  margin-left: 7px;
}
.tongxin {
  display: flex;
  justify-content: flex-start;
}
.weibo {
  display: flex;
  justify-content: flex-start;
}
.weixin {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.qq {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.head {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.head .left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head .yuan {
  display: block;
  width: 49px;
  height: 49px;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 50%;
}
.head .yuan img {
  display: block;
  width: 49px;
  height: 49px;
  border-radius: 50%;
}
.head .yhm {
  margin-left: 10px;
}
.head .yhm p:nth-of-type(1) {
  height: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: Arial-regular;
}
.head .yhm p:nth-of-type(2) {
  height: 14px;
  color: rgba(155, 155, 155, 1);
  font-size: 12px;
  text-align: left;
  font-family: Arial-regular;
  margin-top: 14px;
}
.head .btn {
  width: 58px;
  height: 22px;
  border-radius: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 1);
}
.img {
  width: 120px;
  height: 120px;
}
.img img {
  width: 120px;
  height: 120px;
}
.yhm {
  margin-bottom: 10px;
}
.kong {
  display: block;
  height: 50px;
}
</style>
